<template>
  <border
    class="project-picture"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :isNoImg="borderConfig.isNoImg"
    :goPageUrl="borderConfig.goPageUrl">
      <div class="module-content" slot="module-content">
        <div class="banner-button" @click="previousSwiper">
          <img v-if="slide.length > 1" :src="slide[swiper.realIndex == 0 ? slide.length - 1 : swiper.realIndex - 1]" alt="">
        </div>
        <div class="banner-content">
          <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide class="swiper-slide swiper-no-swiping" v-for="(item,index) in slide" :key="index">
              <img :src="item" alt="">
            </swiper-slide>
          </swiper>
        </div>
        <div class="banner-button" @click="nextSwiper">
          <img v-if="slide.length > 1" :src="slide[swiper.realIndex == slide.length - 1 ? 0 : swiper.realIndex + 1]" alt="">
        </div>
      </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
export default {
  name: 'projectPicture',
  components: {
    Border
  },
  data () {
    return {
      swiper: {},
      borderConfig: {
        moduleType: '2x1',
        icon: require('./../../assets/images/icon/icon.png'),
        titleText: '项目图片',
        goPageUrl: '',
        isNoImg: true
      },
      slide: [
        require('./../../assets/images/module/section2.jpg'),
        require('./../../assets/images/module/section1.jpg'),
        require('./../../assets/images/module/section3.jpg'),
        require('./../../assets/images/module/section4.jpg')],
      swiperOption: {
        // 自动轮播
        autoplay: {
          delay: 3000,
          // 用户操作swiper之后，是否禁止autoplay.默认为true：停止。
          disableOnInteraction: false
        },
        // 开启循环模式
        loop: true,
        // 开启鼠标滚轮控制Swiper切换
        mousewheel: false
      }
    }
  },
  methods: {
    // 上一轮播
    previousSwiper () {
      this.swiper.slidePrev()
    },
    // 下一个轮播
    nextSwiper () {
      this.swiper.slideNext()
    },
    getData (type) {
    }
  },
  mounted () {
    this.swiper = this.$refs.mySwiper.swiper
  },
  watch: {
    'swiper.realIndex' (val) {
      // console.log(val)
    },
    slide (val) {
      if (val.length > 1) {
        this.swiperOption.autoplay = {
          delay: 3000
        }
      } else {
        this.swiperOption.autoplay = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.project-picture {
  .module-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .banner-button {
    width: 12.23%;
    height: 89.4%;
    position: relative;
    top: 5.3%;
    margin-left: 1.3325%;
    float: left;
    background: #101e49;
    overflow: hidden;
    cursor: pointer;
    img {
      height: 100%;
      opacity: 0.3;
    }
  }
  .banner-content {
    width: 70.21%;
    margin-left: 1.3325%;
    height: 100%;
    float: left;
    overflow: hidden;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    width: 100%;
    height: 100%;
    background-color: rosybrown;
    img {
      width: 100%;
    }
  }
}
</style>
